<markdown>
  # 可折叠
</markdown>

<template>
  <x-switch v-model:value="collapsed" />
  <x-menu :options="menuOptions" :collapsed="collapsed" />
</template>

<script setup lang="ts">
import { h, ref } from 'vue'
import { Icon } from 'x-ui-vue3'

function renderIcon(icon) {
  return () => h(Icon, { type: icon })
}

const menuOptions = [
  { label: '个人中心', value: 'my', icon: renderIcon('my') },
  {
    label: '推荐',
    value: 'recommend',
    icon: renderIcon('recommend'),
    children: [
      { label: '《擅长捉弄的高木同学》', value: '高木同学' },
      { label: '《魔女之旅》', value: '魔女' }
    ]
  },
  { label: '分区', value: 'fenqu', icon: renderIcon('fenqu'), disabled: true },
  { label: '动态', value: 'dongtai', icon: renderIcon('dongtai') },
  { label: '追番', value: 'zhuifan', icon: renderIcon('zhuifan') }
]

const collapsed = ref(false)
</script>
```
